<template>
    <div class="content">
        <div class="card_header">
            1
        </div>

        <div class="card_list">

            <div class="card_header_button">
                <a-button type="primary">新增</a-button>
                <a-button type="primary">删除</a-button>
            </div>

            <a-table :columns="columns" :data="data" :loading="loading">
                <template #bodyCell="{ column, record }">
                    <template v-if="column.dataIndex === 'action'">
                        <a-button type="primary">编辑</a-button>
                    </template>
                </template>
            </a-table>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';

const columns = ref([
    {
        title: '名称',
        dataIndex: 'name',
    },
]);

const loading = ref(false);
const data = ref(null);

function getList() {
    loading.value = true;
    setTimeout(() => {
        data.value = [
            {
                name: '张三',
            },
        ] 
        loading.value = false;
    }, 1000);
}

onMounted(() => {
    getList();
});

</script>

<style scoped></style>